<template>
  <div  id="leftSidebar">
    <div class="sidebar">
      <a href="/login" class="logo" el-row type="flex" justify="end">
        <img :src="logonImg" alt="">
        <span>医院信息管理</span>  
      </a>
      <!-- menu菜单 -->
      <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router='true' unique-opened :style="menuStyle">
        <label v-for="menu in menuList" :key="menu.path">
           <el-menu-item :index="menu.path" v-if="menu.children.length===0" v-show="menu.menuShow" @click="getMenuId(menu.id)">
              <i class="iconfont" v-if="menuCollapse">{{menu.name}}</i>
              <span v-text="menu.name" slot="title" :title="menu.name" class="menu-itemEll" v-else></span>
          </el-menu-item>
          <el-submenu v-else :index="menu.path"  v-show="menu.menuShow">
            <template slot="title">
              <i class="iconfont" v-if="menuCollapse">{{menu.name}}</i>
              <span slot="title" v-else :title="menu.name" class="menu-itemEll">{{menu.name}}</span>
            </template>
            <label v-for="subMenu in menu.children" :key="subMenu.path">
              <el-menu-item :index="subMenu.path" v-if="subMenu.children.length===0" v-show="subMenu.menuShow" @click="getMenuId(subMenu.id)">
                 <span v-text="subMenu.name" slot="title" :title="subMenu.name" class="menu-itemEll"></span>
              </el-menu-item>
               <el-submenu :index="subMenu.path" v-else v-show="subMenu.menuShow">
                  <template slot="title">
                    <span v-text="subMenu.name" slot="title" :title="subMenu.name" class="menu-itemEll"></span>
                  </template>
                  <label v-for="subMenu1 in subMenu.children" :key="subMenu1.path">
                     <el-menu-item :index="subMenu1.path" v-if="subMenu1.children.length===0" v-show="subMenu1.menuShow" @click="getMenuId(subMenu1.id)">
                      <span v-text="subMenu1.name" slot="title" :title="subMenu1.name" class="menu-itemEll"></span>
                    </el-menu-item>
                    <el-submenu :index="subMenu1.path" v-else v-show="subMenu1.menuShow">
                      <template slot="title">
                        <span v-text="subMenu1.name" slot="title" :title="subMenu1.name" class="menu-itemEll"></span>
                      </template>
                       <label v-for="subMenu2 in subMenu1.children" :key="subMenu2.path">
                        <el-menu-item :index="subMenu2.path" v-if="subMenu2.children.length===0" v-show="subMenu2.menuShow" @click="getMenuId(subMenu2.id)">
                          <span v-text="subMenu2.name" slot="title" :title="subMenu2.name" class="menu-itemEll"></span>
                        </el-menu-item>
                      </label>
                    </el-submenu>
                  </label>
               </el-submenu>
             </label>
          </el-submenu>
        </label>
      </el-menu>
    </div>
  </div>
</template>
<script>
import logonImg from 'images/logoWhite.png'
import {mapState,mapActions} from 'vuex';
export default {
   props:{
    menuCollapse:Boolean,
    required:true
  },
  data (){
    return {
      logonImg,
      defaultActive:'',/**当前激活菜单 */
    }
  },
  watch:{
    $route(to){
      let self = this;
      self.defaultActive = to.fullPath;
    },
    menuCollapse(newValue){
      this.menuCollapse= newValue? true:false;
    }
  },
  computed:{
    sidebarHeight(){
      return this.clientHeight-60;
    },
    menuStyle(){
      return {
        'height':(this.clientHeight-60)+'px',
        'overflow-y': 'auto',
        'overflow-x': 'hidden',
      }
    },
    ...mapState({
        menuList:state=>state.menuList.menuList,
        clientHeight:state=>state.common.clientHeight
		})
  },
  created() {
    this.changeMenuListAction(); 
  },
  mounted() {
    this.defaultActive = this.$route.fullPath;
  },
  methods:{
    ...mapActions(['changeMenuListAction']),
    getMenuId(id){
      sessionStorage.setItem('menuId', id+'');
    },
  }
}
</script>
<style lang="stylus" scoped>
#leftSidebar
  width 100%
  height 100%
  background-color black 
  .logo
    display block
    font-size 18px
    overflow hidden
    height 60px
    text-align center
    line-height 60px
    color #fff
    background $theme-color
    >img
      vertical-align middle
      width 40px
    >span
      margin-left 8px
  .el-menu-vertical-demo
    box-sizing border-box
    width 100%
    .iconfont
      margin-right 8px
      font-size 14px
      color #303133
  .menu-itemEll
    display inline-block
    width 100%
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
</style>


